<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8" />
<title>首页 - 驴妈妈流立方</title>
<meta name="description" content="overview &amp; stats" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet"  href="${rc.contextPath}/assets/font-awesome/4.2.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="${rc.contextPath}/assets/css/jquery-ui.custom.min.css" />
<link rel="stylesheet"  href="${rc.contextPath}/assets/css/jquery.gritter.min.css" />
<link rel="stylesheet"href="${rc.contextPath}/assets/fonts/fonts.googleapis.com.css" />
<link rel="stylesheet" href="${rc.contextPath}/assets/css/bootstrapValidator.min.css" />
<link rel="stylesheet" href="${rc.contextPath}/assets/css/ace.min.css"class="ace-main-stylesheet" id="main-ace-style" />
<link rel="stylesheet"  href="${rc.contextPath}/assets/css/bsie-paginator.css" />
<link rel="stylesheet"  href="${rc.contextPath}/stylesheets/daterangepicker.css">
<link rel="stylesheet" href="${rc.contextPath}/assets/css/bootstrap.min.css" />
<link rel="stylesheet" href="${rc.contextPath}/assets/css/jquery.gritter.min.css" />
</head>
<body class="no-skin" style="background-color: #FFF;">
	<div class="page-content">
		<div class="tabbable">
			<div class="tab-content">
				<div id="manage" class="tab-pane active in">
					<div class="row">
						<div class="col-xs-12">
						<a href="${rc.contextPath}/recommend/view" id="iframeReload"> <i class="ace-icon fa fa-refresh" style="font: normal normal normal 25px/1 FontAwesome;float:right;"></i></a>
						<!-- 筛选条件开始 -->
							<div class="row">
								<div class="col-xs-12">
									<div class="widget-box">
										<div class="widget-header">
											<h4 class="widget-title lighter">
												<i class="ace-icon fa"></i>转化统计 
											</h4>
										</div>
										<div class="widget-body" style="background-color: #EFF3F8;">
											<div class="widget-main">
											<form class="form-inline" id="searchForm" method="post" action="${rc.contextPath}/recommend/exportData">
												<div class="form-group">
													<label for="exampleInputName" >设备平台
														<select aria-controls="dynamic-table" class="form-control input-sm" name="platformVO" id="platform">
															<#list platForms as platForm>
																<option value="${platForm.value}" <#if platForm.value == "">selected=""</#if> >${platForm.showName}</option>
															</#list>
														</select>
													</label>
													<label for="exampleInputName" style="margin-left: 30px;">页面目录
														<select aria-controls="dynamic-table" onchange="pageChange()" class="form-control input-sm" name="pageVO" id="page">
															<#list pages as page>
																<option value="${page.value}" <#if page.value == "">selected=""</#if> >${page.showName}</option>
															</#list>
														</select>
													</label>
													<label for="exampleInputName" style="margin-left: 30px;">板块
														<select aria-controls="dynamic-table" class="form-control input-sm" name="pageVO" id="board">
															<#list boards as board>
																<option value="${board.value}" <#if board.value == "">selected=""</#if> >${board.showName}</option>
															</#list>
														</select>
													</label>
													<label for="exampleInputName" style="margin-left: 30px;" id="categoryDiv">品类
														<select aria-controls="dynamic-table" class="form-control input-sm" name="pageVO" id="categoryId">
															<#list categories as category>
																<option value="${category.value}" <#if category.value == "">selected=""</#if> >${category.showName}</option>
															</#list>
														</select>
													</label>
													<label for="exampleInputName" style="margin-left: 30px;">选择时段
														<input class="form-control input-sm" type="text" id="config-demo" name="btime"/>
													</label>
													<button type="button" class="btn btn-pink btn-sm" id="generateBtn">
														<span class="ace-icon fa fa-search icon-on-right bigger-110"></span>
														查询
													</button>
													<button type="button" class="btn btn-pink btn-sm" id="exportExcel" onclick="exportData()">
														导出xls文件
													</button>
												</div>
												</form>
											</div>
										</div>
									</div>
								</div>
							</div>
							<!-- 筛选条件结束 -->
					    </div>
					</div>
					<div class="row" style="padding-top: 30px;">
						<div class="col-sm-12">
								<table id="dynamic-table" class="table table-striped table-bordered table-hover dataTable no-footer" role="grid" aria-describedby="dynamic-table_info" style="display: none;">
									<thead>
										<tr>
											<th>日期</th>
											<th>UV(用户数)</th>
											<th>推荐访问数</th>
											<th>下单用户数</th>
											<th>下单总数</th>
											<th>下单总金额(元)</th>
											<th>推荐访问率</th>
											<th>人均单量</th>
											<th>转化率</th>
											<th>客单价(元)</th>
											<th>推荐准确率</th>
										</tr>
									</thead>
									<tbody id="data">
									</tbody>
								</table>
			
								<div class="ui-jqgrid" id="pageBarDiv" style="display: none;">
									<div id="grid-pager" class="ui-state-default ui-jqgrid-pager ui-corner-bottom" dir="ltr">
										<div id="pg_grid-pager" class="ui-pager-control" role="group">
											<table cellspacing="0" cellpadding="0" border="0" class="ui-pg-table" style="width: 100%; table-layout: fixed; height: 100%;" role="row">
												<tbody>
													<tr>
														<td id="grid-pager_left" align="left"></td>
														<td id="grid-pager_center" align="center" style="white-space: pre; width: 343px;">
															<table cellspacing="0" cellpadding="0" border="0" style="table-layout: auto;" class="ui-pg-table">
																<tbody>
																	<tr>
																	</tr>
																</tbody>
															</table>
														</td>
														<td id="grid-pager_right" align="right"><div dir="ltr" style="text-align: right" class="ui-paging-info">View 0 -
																0 of 0</div></td>
													</tr>
												</tbody>
											</table>
										</div>
									</div>
								</div>
							</div>
						</div>
				 </div>
				</div>
			</div>
		</div>
	<script src="${rc.contextPath}/assets/js/jquery.2.1.1.min.js"></script>
	<script src="${rc.contextPath}/assets/js/jquery-ui.custom.min.js"></script>
	<script src="${rc.contextPath}/assets/js/jquery.ui.touch-punch.min.js"></script>
	<script src="${rc.contextPath}/assets/js/bootbox.min.js"></script>
	<script src="${rc.contextPath}/assets/js/jquery.gritter.min.js"></script>
	<script src="${rc.contextPath}/assets/js/spin.min.js"></script>
	<script src="${rc.contextPath}/assets/js/ace-elements.min.js"></script>
	<script src="${rc.contextPath}/assets/js/ace.min.js"></script>
	<script src="${rc.contextPath}/assets/js/bootstrapValidator.min.js"></script>
	<script src="${rc.contextPath}/assets/js/user/base.js"></script>
	<script src="${rc.contextPath}/assets/js/ace-extra.min.js"></script>
	<script src="${rc.contextPath}/assets/js/moment.min.js"></script>
	<script src="${rc.contextPath}/assets/js/bootstrap-datetimepicker.min.js"></script>
	<script type="text/javascript" src="${rc.contextPath}/javascripts/echarts.js"></script>
	<script type="text/javascript"  src="${rc.contextPath}/javascripts/bootstrap.min.js"></script>
	<script type="text/javascript" src="${rc.contextPath}/javascripts/moment.js"></script>
	<script type="text/javascript" src="${rc.contextPath}/javascripts/daterangepicker.js"></script>
	<script type="text/javascript" src="${rc.contextPath}/javascripts/dateRange.js"></script>
	<script type="text/javascript" src="${rc.contextPath}/javascripts/echart-option.js"></script>
	 <script type="text/javascript">
		jQuery(function ($) {
			$('input[name=btime]').daterangepicker({
						startDate: new Date(new Date().getTime() - 1 * 1000 * 60 * 60 * 24),
						endDate: new Date(new Date().getTime() - 1 * 1000 * 60 * 60 * 24),
						/* startDate: new Date(new Date().getTime()-7*1000*60*60*24),
						 endDate: new Date(new Date().getTime()-1*1000*60*60*24), */
						showDropdowns: true,
						showWeekNumbers: false,
						timePicker: false,
						timePicker12Hour: false,
						ranges: {
							'昨日': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
							'最近7日': [moment().subtract(7, 'days'), moment().subtract(1, 'days')],
							'最近30日': [moment().subtract(30, 'days'), moment().subtract(1, 'days')],
							'最近90日': [moment().subtract(90, 'days'), moment().subtract(1, 'days')]
						},
						opens: 'right',
						buttonClasses: ['btn btn-default'],
						applyClass: 'btn-small btn-pink',
						cancelClass: 'btn-small',
						format: 'yyyy-MM-dd',
						separator: ' to ',
						locale: {
							applyLabel: '确定',
							cancelLabel: '取消',
							fromLabel: '起始时间',
							toLabel: '结束时间',
							customRangeLabel: '自定义',
							daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
							monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
								'七月', '八月', '九月', '十月', '十一月', '十二月'],
							firstDay: 1
						}
					},
					function (start, end, label) {//格式化日期显示框

						$('#chooseTime').html(start.format('yyyy-MM-dd') + ' - ' + end.format('yyyy-MM-dd'));
					});
			$("#categoryDiv").hide();
		});
		var pageChange = function () {
			if($("#page").val() =="PRODUCT_DETAIL" || $("#page").val() =="PAY_SUCCESS"){
				$("#categoryDiv").show();
			}else{
				$("#categoryDiv").hide();
			}
		};
   	</script>
	<script type="text/javascript">
		var pageNow = 1;
		var pageSize;
		var start;
		var pageCount;
		$(document).ready(function(event) {
			$("#exportExcel").hide();
			$("#generateBtn").click(function(){
				var platform = $("#platform").val();
				var page = $("#page").val();
				var board = $("#board").val();
				var categoryId = $("#categoryId").val(); 
				var time = $("#config-demo").val();
				var startDate = time.split(" - ")[0];
				var endDate = time.split(" - ")[1];

				pageSize = 10;
				start = (pageNow-1)*pageSize;

				$.ajax({
					  data: "platform="+platform+"&page="+page+"&board="+board+"&categoryId="+categoryId+"&startDate="+startDate+"&endDate="+endDate+"&pageNow="+pageNow+"&pageSize="+pageSize+"&start="+start,
					  url: "${rc.contextPath}/recommend/query",
					  success: function(data){
					    if(data==null||data==""||data.rowCount==0||data.data==null){
					    	window.location.href="${rc.contextPath}/page/404";
					    	return;
					    }else{
					    	$("#exportExcel").show();
					    	$("#dynamic-table").show();
					    	$("#data").empty();
					    	var dataList=data.data;
					    	for(i=0;i<dataList.length;i++){
						    	var html="<tr><td>"+ new Date(dataList[i].date).Format('yyyy-MM-dd')+"</td>"
						    	+"<td>"+dataList[i].uv+"</td>"+"<td>"+dataList[i].recommendPv+"</td>"
						    	+"<td>"+dataList[i].orderedUserNo+"</td>"+"<td>"+dataList[i].orderTotalNo+"</td>"
						    	+"<td>"+dataList[i].orderTotalAmount+"</td>"+"<td>"+dataList[i].visitRate+"</td>"
						    	+"<td>"+dataList[i].orderNoPerUser+"</td>"+"<td>"+(dataList[i].turnRate*100).toFixed(2)+"%</td>"
						    	+"<td>"+dataList[i].amountPerUser+"</td>"+"<td>"+dataList[i].accuracy+"</td></tr>"
						    	$("#data").append(html);
					    	}

							pageCount = data.pageCount;
							var rowCount = data.rowCount;
							var fromRow = start+1;
							var toRow = start+pageSize > rowCount ? rowCount : start+pageSize ;
							//pageBar
							var pageFirstHtml = "<td id='first_grid-pager' onclick='go(1)' class='ui-pg-button ui-corner-all ui-state-disabled' style='cursor: pointer;'><span class='ui-icon ace-icon fa fa-angle-double-left bigger-140'></span></td>";
							var pagePreHtml = "<td id='prev_grid-pager' onclick='go("+(pageNow-1)+")' class='ui-pg-button ui-corner-all ui-state-disabled' style='cursor: pointer;'><span class='ui-icon ace-icon fa fa-angle-left bigger-140'></span></td>";
							var pageHtml = "<td dir='ltr'>Page <input class='ui-pg-input' onchange='pageNowChange(this)' type='text' size='2' maxlength='7' value='"+pageNow+"' role='textbox'> of <span id='sp_1_grid-pager'>"+pageCount+"</span></td>";
							var pageNextHtml = "<td id='next_grid-pager' onclick='go("+(pageNow+1)+")' class='ui-pg-button ui-corner-all ' style='cursor: pointer;'><span class='ui-icon ace-icon fa fa-angle-right bigger-140'></span></td>";
							var pageLastHtml = "<td id='last_grid-pager' onclick='go("+pageCount+")' class='ui-pg-button ui-corner-all ' style='cursor: pointer;'><span class='ui-icon ace-icon fa fa-angle-double-right bigger-140'></span></td>";

							$("#pageBarDiv").show();
							$("#grid-pager_center tr").empty();
							$("#grid-pager_center tr").append(pageFirstHtml).append(pagePreHtml).append(pageHtml).append(pageNextHtml).append(pageLastHtml);
							var pageBarSpan = "View "+fromRow+" - "+toRow+" of "+rowCount;
							$("#grid-pager_right div").text(pageBarSpan);
					    }
					 }
				});
			});
		});

		function exportData(){
			$("form").submit();
		}

		function go(pageNum) {
			if (parseInt(pageNum) != pageNum || parseInt(pageNum) <= 0) {
				return;
			}
			if (parseInt(pageNum) > pageCount) {
				return;
			}
			pageNow = parseInt(pageNum);
			$("#generateBtn").click();
		}

		function pageNowChange(obj){
			go($(obj).val());
		}

		Date.prototype.Format = function (fmt) { 
		    var o = {
		        "M+": this.getMonth() + 1, //月份 
		        "d+": this.getDate(), //日 
		        "h+": this.getHours(), //小时 
		        "m+": this.getMinutes(), //分 
		        "s+": this.getSeconds(), //秒 
		        "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
		        "S": this.getMilliseconds() //毫秒 
		    };
		    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
		    for (var k in o)
		    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
		    return fmt;
		}
	</script>
</body>
</html>